import Home from "./pages/Home/index.js";
import Information from "./pages/Information/index.js";
import LookHouse from "./pages/LookHouse/index.js";
import My from "./pages/My/index.js";
import CityList from "./pages/CityList/index.js";
import Map from "./pages/Map/index.js";

import React from "react";
import { TabBar } from "antd-mobile";
import {
  Route,
  useNavigate,
  useLocation,
  HashRouter as Router,
  Routes,
  Navigate,
} from "react-router-dom";
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";

import "./index.scss";

function App() {
  const [height, setHeight] = React.useState(window.innerHeight - 50);
  const Bottom = () => {
    const location = useLocation();
    const { pathname } = location;
    const navigate = useNavigate();
    const setRouteActive = (value) => {
      navigate(value);
    };

    const tabs = [
      {
        key: "/home",
        title: "首页",
        icon: <AppOutline />,
      },
      {
        key: "/information",
        title: "资讯",
        icon: <UnorderedListOutline />,
      },
      {
        key: "/lookhouse",
        title: "找房",
        icon: <MessageOutline />,
      },
      {
        key: "/my",
        title: "我的",
        icon: <UserOutline />,
      },
    ];

    return useIsFlag(pathname) ? (
      <div className="bottom">
        <TabBar
          activeKey={pathname}
          onChange={(value) => setRouteActive(value)}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    ) : (
      ""
    );
  };
  const useIsFlag = (pathname) => {
    if (
      !pathname ||
      pathname === "/" ||
      pathname === "/home" ||
      pathname === "/information" ||
      pathname === "/lookhouse" ||
      pathname === "/my"
    ) {
      setHeight(window.innerHeight - 50);
      return true;
    } else {
      setHeight("100vh");
      return false;
    }
  };

  return (
    <Router>
      <div className="app">
        <div className="body" style={{ height: height }}>
          <Routes>
            <Route path="/" element={<Navigate to="/home" />}></Route>
            <Route path="/home" element={<Home />}></Route>
            <Route path="/information" element={<Information />}></Route>
            <Route path="/lookhouse" element={<LookHouse />}></Route>
            <Route path="/my" element={<My />}></Route>

            <Route path="/citylist" element={<CityList />}></Route>
            <Route path="/map" element={<Map />}></Route>
          </Routes>
        </div>

        <Bottom />
      </div>
    </Router>
  );
}

export default App;
